import React from 'react'
import Swal from 'sweetalert2';

export default function TodoMain(props) {
  //获取任务的数组
  let {todos, removeTodo, checkTodo, isFirst} = props;
  //声明函数作为删除按钮的事件回调
  let remove = (id) => {
    //删除的回调函数
    return () => {
      //sweetalert 提醒
      Swal.fire({
        title: '确认删除',
        text: '您确定要删除这个项目吗？',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }).then((result) => {
        if (result.isConfirmed) {
          // 用户点击了确认按钮
          //删除任务, 父级组件状态的任务数组
          removeTodo(id);
          // 执行删除操作或其他操作
          Swal.fire(
            '已删除',
            '项目已成功删除。',
            'success'
          );
        } else {
          // 用户点击了取消按钮或点击了遮罩层
          Swal.fire(
            '已取消',
            '您取消了删除操作。',
            'info'
          );
        }
      });

      
    }
  }

  return (
    <ul className="todo-main">
      {
        todos.map(item => {
          return <li key={item.id}>
                  <label>
                    <input type="checkbox" checked={item.done} onChange={(e) => {
                      //更新父级组件的 todos 状态
                      checkTodo(item.id, e.target.checked);
                      // console.log(e.target.checked);
                    }} />
                    <span  className={item.done ? "done" : undefined}>{item.title}</span>
                  </label>
                  <button className="btn btn-danger" onClick={remove(item.id)}>删除</button>
                </li>
        })
      }
      {/* 空状态提醒 */}
      {!isFirst && todos.length === 0 && <li style={{textAlign:'center', padding: 20}}>空空如也</li>}
      {/* loading 提醒 */}
      {isFirst && <li className='loading'></li>}
    </ul>
  )
}
